<template>
  <div class="animated-background">
    <div 
      v-for="i in 5" 
      :key="i"
      class="cube"
      :class="`cube-${i}`"
    ></div>
  </div>
</template>

<script>
export default {
  name: 'BackgroundAnimation'
}
</script>

<style scoped>
.animated-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(125deg, #fff6f6 0%, #f0f7ff 100%);
}

.cube {
  position: absolute;
  background: linear-gradient(45deg, rgba(79, 70, 229, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
  animation: float 20s infinite;
  border-radius: 10px;
}

.cube:nth-child(1) {
  width: 160px;
  height: 160px;
  top: 15%;
  left: 15%;
  animation-delay: 0s;
}

.cube:nth-child(2) {
  width: 200px;
  height: 200px;
  top: 65%;
  left: 75%;
  animation-delay: -4s;
}

.cube:nth-child(3) {
  width: 120px;
  height: 120px;
  top: 45%;
  left: 45%;
  animation-delay: -8s;
}

.cube:nth-child(4) {
  width: 180px;
  height: 180px;
  top: 75%;
  left: 25%;
  animation-delay: -12s;
}

.cube:nth-child(5) {
  width: 140px;
  height: 140px;
  top: 25%;
  left: 80%;
  animation-delay: -16s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-100px) rotate(90deg) scale(1.2);
  }
  50% {
    transform: translateY(-50px) rotate(180deg) scale(0.8);
  }
  75% {
    transform: translateY(-150px) rotate(270deg) scale(1.1);
  }
}
</style> 